<template>

    <mu-container class="profilePaper">
      <mu-row>
        <mu-appbar class="profileAppBar" color="primary">
          <mu-icon value="contacts" slot="left"></mu-icon>
          支付中心
        </mu-appbar>
      </mu-row>
      <mu-row>
        <mu-col span="12">
          <mu-card class="ProfileCard" raised>
            <mu-card-header :title="'用户名： ' + userInfo.username" :sub-title="'用户ID号:  ' + userInfo.userId">
              <mu-avatar slot="avatar">
                <mu-icon value="person"></mu-icon>
              </mu-avatar>
            </mu-card-header>
            <mu-card-text>
              <mu-list>
                <mu-list-item>
                  <mu-list-item-action><mu-icon value="person_pin"></mu-icon></mu-list-item-action>
                  <mu-list-item-title>余额： {{ userInfo.money.toFixed(2) }}</mu-list-item-title>
                </mu-list-item>
                <mu-list-item v-if="userInfo.paymoney !== 0.0">
                  <mu-list-item-action><mu-icon value="fingerprint"></mu-icon></mu-list-item-action>
                  <mu-list-item-title>待充值金额： {{ userInfo.paymoney }}</mu-list-item-title>
                </mu-list-item>
                <mu-list-item>
                  <mu-list-item-action><mu-icon value="fingerprint"></mu-icon></mu-list-item-action>
                  <mu-list-item-title>vip等级： {{ userInfo.viplevel }}</mu-list-item-title>
                </mu-list-item>
                <mu-list-item>
                  <mu-list-item-action><mu-icon value="fingerprint"></mu-icon></mu-list-item-action>
                  <mu-list-item-title>vip等级折扣： {{ discount }}</mu-list-item-title>
                </mu-list-item>
              </mu-list>
            </mu-card-text>
            <mu-card-actions>
              <mu-button color="green" @click="navigateTo('/myPay')">充值</mu-button>
            </mu-card-actions>
          </mu-card>
        </mu-col>
      </mu-row>
    </mu-container>

</template>

<script>

import Cookie from 'js-cookie'
import {getUserInfo} from "@/api/user";
import {findAll} from "@/api/userVipLevel";

    export default {
        name: "MyPay",
      data () {
        return {
          userInfo: {},
          discount: ''
        }
      },
      created() {
        this.fetchData();
      },
      methods: {
        fetchData(){
          getUserInfo().then(res => {
            this.userInfo = res.data;

            findAll().then((res)=>{
              for (let i = 0; i < res.data.length; i++) {
                if (res.data[i].viplevel === this.userInfo.viplevel+''){
                  this.discount = res.data[i].discount
                }
              }
            })

          }).catch(err => {
            this.$toast.error(err)
          })
        },
        navigateTo(val){
          this.$router.push(val);
        },
      }
    }
</script>

<style scoped>
  .login-container{
    width: 100%;
    background-image: linear-gradient(270deg,#8146b4,#6990f6);
    padding: 8px;
  }
  .mu-demo-form {
    width: 100%;
    /*max-width: 460px;*/
  }
  .login-card{
    width: 100%;
    max-width: 80%;
    margin: 50px auto;
  }
  .profileAppBar{
    height: 40px;
    width: auto!important;
    border-radius: 35px;
    margin: 10px;
    color: #fff;
    padding: 10px;
  }
  .profilePaper{
    padding: 10px;
  }
  .ProfileCard{
    width: 100%;
    margin: 0 auto;
  }
</style>
